<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="名称(简)" prop="name_zh">
                            <el-input
                                v-model="form.name_zh"
                                placeholder="请输入分类简体名称"
                                class="input-width"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="名称(繁)" prop="name_tw">
                            <el-input
                                v-model="form.name_tw"
                                placeholder="请输入分类繁体名称"
                                class="input-width"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="分类图" prop="picture">
                    <file-upload :type="1" :multiple="false" v-model="form.picture">
                        <img
                            v-if="form.picture"
                            :src="form.picture"
                            class="uploader-icon picture image-uploader"
                        />
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { Row, Col } from 'element-ui';
import FileUpload from '../../components/base/FileUpload';

export default {
    components: {
        ElRow: Row,
        ElCol: Col,
        FileUpload,
    },
    data() {
        return {
            form: {
                name_zh: '',
                name_tw: '',
                picture: '',
            },
            rules: {
                name_zh: [
                    { required: true, message: '请输入简体中文名称', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        onSave() {

        },
    },
    computed: {

    },
    watch: {},
    mounted() {

    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
</style>
